這一篇中會介紹默司大大在線上讀書會 主講的 vscode 的精彩

https://www.youtube.com/watch?v=rsaqfyDLzQM

以下是重點整理

安裝完 vscode 之後開啟終端機到專案的目錄 直接打 code . 就可以直接開啟該專案歐
接下來介紹一些常用的 plugin
** HTML Snippets ** - 常用的一些snippets 可以貼一些html5的快速鍵
** Path intellisense ** - 可以自動把常用資料夾中路徑自動顯示
** eslint ** - 適用於團隊對於程式風格規範,有嚴謹的規範例如程式碼縮排
** git history ** - 可以在vscode裡面直接看到操作紀錄
** Tslint ** - 類似 eslint 嚴謹模式開發, 不過是用在Typescript
** google complete Me ** - 透過google幫你搜尋出可能會用的字,智能提示
** document this ** -可以快速產出文件檔
** angular2 Typescript Snippets ** - 可以快速產出常用的 angularjs 2 Snippet code
** vscode icons ** - 可以變換檔案目錄的小icon 心情會愉快許多歐,可以一眼看出檔案類型
** auto import ** - 如果程式碼中有用到某個關聯性物件,會幫忙自動載入lib庫,目前只可用在typescript
** babelrc ** - 可以有schema功能
** bootstrap 3 snippets ** - bootstrap的 snippets
** Javascript (es6) Code Snippets ** - Javascript es6的 snippets

環境設定
1.全域設定
cmd + p 在輸入>setting 選擇開啟工作區設定,打開後會有分左右兩個畫面左邊的匡是可以參考用的,右邊的匡寫入後就可以改變設定了,這邊的設定值都有中文說明也可以參考默司大大的影片
2.專案設定
cmd + p 在輸入>setting 選擇開啟使用者設定,設定方法與全域一樣只是這是針對某一專案特別的設定
3.快速鍵
cmd + p 在輸入>快 或是 >short 就會出現設定檔了,打開後會有分左右兩個畫面左邊的匡是可以參考用的,右邊的匡寫入後就可以改變設定了,快速鍵主要由 key 與 command 組合 也可以再搭配 when使用 ,舉一個例,如果vscode中要在terminal開啟時按下cmd+w 可以關閉terminal可以透過下列組合完成

           "command":"workbench.action.terminal.kill",
           "key":"cmd+w",
           "when":"terminalFocus"

默司大大的影片也有列舉更多範例可以參考影片中約31分的地方
4.es6/javascript 設定與編譯
影片中有創建一個 jsconfig.json,這個部分是早期vscode要智能提示時需要的設定,新版的已經不需要設定嚕

        {
        "compilerOptions": {
        "module": "commonjs",
        "target": "es5"  // 這裡如果是前端使用es5
        },
        "exclude": [
        "node-modules"
        ]
        }

接下來要使用 npm init -y 創建一個 package.json做套件管理
使用yarn add babel-runtime
在使用 yarn add -dev babel-cli babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0

補充 yarn 是新的類似npm管理套件用的套件 可以透過npm install yarn -g 安裝

編譯.babelrc 設定檔

            {
            "presets": [
            "stage-0",
            "es2015"
            ],
            "plugins": [
            "transform-runtime"  //這邊主要是要讓前端有些瀏覽器不支援es6語法的部分補上一些功能
            ]
            }

完成上述設定檔後,如果要把程式碼轉es5 就要下指令
babel -s -d dist /src (這邊babel 可以安裝全域,-s 是sourceMap -d是目的輸出檔)

sourceMap是什麼東東,程式碼中會es6轉es5,過程中除錯斷點會發生在es5中,所以souceMap就是在對應這個的es6錯誤點使用,之後會再介紹webpack這個東東..因為是2016年....

再把這一段寫在package.json之中的script可以直接用 npm 指令執行編譯輸出
強大的智能提示
可以使用 yarn 安裝各類的 @types/各類的定義檔 這樣會有智能提示的功能非常的強大
影片中 import _ from 'lodash;這樣寫法時智能提示無法作用
要改成 const _ =require('lodash') 或 import * as _ from 'lodash 就可以使用了
使用vscode 火力演示 async/await + promise 示範 56分鐘處
因為es6已經內建所以就不用在載入 Promise ,Demo中是使用後端request包裝成 Promise在使用async/await 前端的話可以使用fetch
備註使用await前 function 前一定要包一個 async ,await接收一定是要一個Promise
Promise寫法如下用一個function去 return new Promise((resolve,reject)=>{ })

整段如下

              const _ =require('loadsh');
              const request=require('request');
              function getUrl(){
                   return new Promise((resolve,reject)=>{ 
                      request('https://google.com',(error,res,data)=>{
                            if(error) return reject(error);
                            resolve(data);
                      });
                   })
              }
            (async()=>{
            try {
               let html= await getUrl();
               console.log(html);
               } catch(err) {
               console.log(err);
                }
            })();

// 以上補充 try catch 錯誤機制 另外如果嫌麻煩 可以使用 warp

const warp = (fn) => (req, res, next) => fn(req, res, next).catch(next)

            warp(async()=>{
               let html= await getUrl();
               console.log(html);
            })();

async/await 屬於 ES7 標準，若有人寫 ES6+ 則表示含部分 ES7 的標準。Babel 載入 stage-0 plugin 後就支援這個標準 (感謝 lavn wei 大的補充)
不過node 7.2 如過是寫後端已不需 babel在轉譯了
node --harmony-async-await app.js 直接可以使用歐

debug 影片 1:08分處
組態設定先選則nodejs版本
組態中 program要改成輸出的執行位置這邊範例為main.js,就如下

            ...
            "program":"${workspaceRoot}/dist/main.js",
               "preLaunchTask":"build", //這個要對應下方工作執行器設定組態檔
               "sourceMaps":true
            ...

cmd + p >工作執行器設定組態檔

             ...
                },{
                "TaskName":"build",
                "args":["run","build"]
                }
             ...

就可以下斷點了,影片斷點環境是後端歐
5.typescript 設定與編譯
typescript 是微軟推出可以使用強型別的語言可以產出javascript,方便開發及維護的的一種語言
方便的部分是因為有static typing 可以讓程式碼編輯器中的語法提示（Intellisense）功能,更好維護的部分則是未來如果javascript一直更新版本,不需要去跟新的語法則可以產出新版的javascript

polo之前有用過sublime,atom 現在用到默司 推薦的好物 Vscode,用起來很舒服也推薦大家使用

明天繼續攻略reactjs jason 大大的 Todolist 其他章節了

在it鐵人賽中,線上讀書會12月也是天天都精彩歐 下面有連結這整個月的活動表,有空的話在家裡就可以參加了
也有很多朋友在問是否要費用,是不用的歐,參加方法可以到粉絲團https://www.facebook.com/readbook999/ 點選全系列連結選喜歡的線上讀書會加入並安裝zoom後就等精彩的活動超連結(活動前約30分鐘會公佈)
https://goo.gl/CK1ibc